/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-05-09 15:16:00
 * @LastEditTime : 2023-08-13 16:12:05
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\Assets\Template\BeamProduce.jsx
 * @Description  :
 */
import './Scss/BeamProduce.scss'
import { useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { useState } from 'react'
import dayjs from 'dayjs'
import { TitleSmall001 } from '../Common/SmallTitle'
import { FrontModalBox } from '../Modal'

const params001 = {
    year: dayjs().format('YYYY'),
    month: dayjs().format('MM'),
    day: dayjs().format('DD'),
}

export const BeamProduce001 = ({ NavEvent }) => {
    const [UUID, setUUID] = useState()
    const { run: GetOne } = useRequest(Http, { manual: true, onSuccess: res => setDataOne(res) })
    const { run: GetTwo } = useRequest(Http, { manual: true, onSuccess: res => setDataTwo(res) })
    NavEvent.useSubscription(val => {
        GetOne({ url: `getMixPlatProductivity`, data: { organizationUuid: val.organizationUuid, ...params001 } })
        GetTwo({ url: `getConstructionBeamProductivity`, data: { organizationUuid: val.organizationUuid } })
        setUUID(val.organizationUuid)
    })

    const OneArr = [
        { uuid: '1', label: '年出料量', value: 'yearProductivity', unit: 'm³' },
        { uuid: '2', label: '月出料量', value: 'monthProductivity', unit: 'm³' },
        { uuid: '3', label: '日出料量', value: 'dateProductivity', unit: 'm³' },
    ]

    const TwoArr = [
        {
            uuid: '1',
            label: '年生产能力',
            value: 'yearProductivity',
            unit: '片',
            click: {
                label: '梁片年生产能力 (统计)',
                value: 'SecondaryGetBeamProduceSum',
            },
        },
        {
            uuid: '2',
            label: '日生产能力',
            value: 'dayProductivity',
            unit: '片',
            click: {
                label: '梁片年生产明细 (明细)',
                value: 'SecondaryGetBeamProduceRecords',
            },
        },
        {
            uuid: '3',
            label: '剩余所需时间',
            value: 'daysLeft',
            unit: '日',
        },
    ]

    const [DataOne, setDataOne] = useState({})
    const [DataTwo, setDataTwo] = useState({})
    const [OptionsCall, setOptionsCall] = useState()

    return (
        <div className="BeamProduce001">
            <TitleSmall001 title="拌合站出料量" />
            <div>
                {OneArr.map(({ uuid, label, value, unit }) => (
                    <div
                        key={uuid}
                        onClick={() => {
                            setOptionsCall({
                                type: 'TableList',
                                data: { uuid: UUID, title: '拌合站出料明细', type: 'SecondaryCementMixPlat' },
                            })
                        }}
                    >
                        <div style={{ color: 'rgba(148, 255, 255, 1)' }}>{label}</div>
                        <div>
                            {DataOne[value] || 0} <span>{unit}</span>{' '}
                        </div>
                    </div>
                ))}
            </div>
            <TitleSmall001 title="粱片生产力" />
            <div>
                {TwoArr.map(({ uuid, label, value, unit, click }) => (
                    <div
                        key={uuid}
                        onClick={() => {
                            if (click)
                                setOptionsCall({
                                    type: 'TableList',
                                    data: { uuid: UUID, title: click.label, type: click.value },
                                })
                        }}
                    >
                        <div style={{ color: 'rgba(255, 244, 148, 1)' }}>{label}</div>
                        <div>
                            {DataTwo[value] || 0} <span>{unit}</span>{' '}
                        </div>
                    </div>
                ))}
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
